<template>
    <div>
        <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
            <el-table-column type="index" label="序号" width="50">
            </el-table-column>
            <el-table-column label="任务名称" width="200">
                <template slot-scope="scope">
                    <div>
                        <i class="el-icon-warning"
                            :class="{ 'red': scope.row.urgentState == 1, 'yellow': scope.row.urgentState == 2, 'green': scope.row.urgentState == 3 }"></i>
                        <span :class="{ 'decoration': scope.row.state == 4 }">{{ scope.row.taskName }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="类型">
                <template slot-scope="scope">
                    <span>
                        {{ scope.row.category == 1 ? '限时任务' : '周期任务' }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="状态">
                <template slot-scope="scope">
                    <el-tag size="medium" :type="
                        scope.row.state == 1 ? 'danger' :
                            scope.row.state == 2 ? 'warning' :
                                scope.row.state == 3 ? 'success' :
                                    scope.row.state == 4 ? '' :
                                        scope.row.state == 5 ? 'info' : ''">
                        {{
                            scope.row.state == 1 ? '已延期' :
                            scope.row.state == 2 ? '即将到期' :
                                scope.row.state == 3 ? '未到期' :
                                    scope.row.state == 4 ? '已暂停' :
                                        scope.row.state == 5 ? '已完成' : ''
                        }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="projectName" label="关联项目">
            </el-table-column>
            <el-table-column label="截止时间">
                <template slot-scope="scope">
                    {{ scope.row.endDate.substring(0, 16) }}
                </template>
            </el-table-column>
            <el-table-column prop="userName" label="责任人">
            </el-table-column>
            <el-table-column prop="categoryName" label="其他参与人">
            </el-table-column>
            <el-table-column label="操作" width="420">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row.id)" type="primary" size="small" plain>查看详情</el-button>
                    <el-button @click="okClick(scope.row.id)" type="primary" size="small" plain v-if="scope.row.completedFlag ==0 && scope.row.completedStateFlag == 1">完成情况</el-button>
                    <el-button type="primary" size="small" plain @click="editOk(scope.row.id)"
                        v-if="scope.row.confirmShowFlag == 1 && scope.row.completedFlag == 0">已完成</el-button>
                    <el-button :type="scope.row.startFlag == 1 ? 'success' : 'warning'" size="small" plain
                        @click="editStartFlag(scope.row.id, scope.row.startFlag)"
                        v-if="scope.row.stopShowFlag == 1 && scope.row.completedFlag == 0">
                        {{
                            scope.row.startFlag == 1 ? '开启' : '暂停'
                        }}</el-button>
                    <el-button type="danger" size="small" plain
                        v-if="scope.row.deleteShowFlag == 1 && scope.row.deleteFlag == 0"
                        @click="editDeleteFlag(scope.row.id, scope.row.deleteFlag)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
export default {
    props: ['tableData'],
    data() {
        return {
            endDate: "",
        }
    },
    methods: {
        tableRowClassName({ row }) {
            if (row.state === 4) {
                return 'completedFlag-row';
            }
            return '';
        },
        handleClick(id) {
            this.$emit("selectDetail", id)
        },
        editStartFlag(id, flag) {
            let params = {
                id: id,
                flag: flag
            }
            this.$emit("editStartFlag", params)
        },
        editDeleteFlag(id, flag) {
            let params = {
                id: id,
                flag: flag
            }
            this.$emit("editDeleteFlag", params)
        },
        editOk(id) {
            this.$emit("editCompletedFlag", id)
        },
        okClick(id){
            this.$emit("performanceFlag", id)
        },
    },
}
</script>
<style scoped>
.red {
    color: red;
}

.yellow {
    color: rgb(255, 179, 0);
}

.green {
    color: green;
}

.decoration {
    text-decoration: line-through
}
</style>
<style>
.el-table .completedFlag-row {
    background: rgb(214, 214, 214);
}

.el-table .defult-row {
    background: rgb(255, 255, 255);
}
</style>